<template>
  <div class="app-container">
    <div class="card-container" v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="8" v-for="course in s_courseList" :key="course.id">
          <el-card
            class="card-item"
            shadow="hover"
            @click="goTolist(course.cid)"
          >
            <div class="card-header">
              <p class="course-name">{{ course.courseName }}</p>
            </div>
            <div class="card-content">
              <p>加入时间: {{ parseTime(course.joinTime) }}</p>
              <p>备注: {{ course.remark || '无' }}</p>
            </div>
            <div class="card-actions">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-search"
                @click.stop="goTolist(course.cid)"
              >
                进入
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>



  </div>
</template>

<script>
import { listS_course, getS_course, delS_course, addS_course, updateS_course } from "@/api/course/s_course";

export default {
  name: "S_course",
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      loading: true,
      total: 0,
      s_courseList: [],
      title: "",
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      form: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    goTolist(cId) {
      console.log("跳转到课程详情页，课程ID:", cId);
      this.$router.push({ path: "/course/s_course/list", query: { cId } });
    },
    getList() {
      this.loading = true;
      listS_course(this.queryParams).then((response) => {
        this.s_courseList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    parseTime(time) {
      if (!time) return '';
      const date = new Date(time);
      return date.toISOString().slice(0, 19).replace('T', ' ');
    }
  },
};
</script>

<style scoped>
.card-container {
  text-align: center;
}

.card-item {
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}

.card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #409eff;
}

.course-name {
  font-size: 18px;
  color: #333;
}

.card-content p {
  font-size: 14px;
  margin: 5px 0;
  color: #666;
}

.card-actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.el-button {
  width: 90px;
  font-size: 12px;
  border-radius: 20px;
  padding: 6px;
  color: #409eff;
}

.el-button:hover {
  color: #ffffff;
  background-color: #409eff;
}
</style>
